<template>
  <div class="customerCenterRecord">
    <c-title :hide="false" :text="'轨迹追踪'"></c-title>
    <div class="top" v-if="customer_details">
      <div class="image">
        <img :src="customer_details.avatar_image" alt="" />
      </div>
      <div class="topRight">
        <div class="user">
          <div class="name">{{ customer_details.nickname }}</div>
          <div class="id">ID：{{ customer_details.uid }}</div>
        </div>
        <div class="icobox">
          <i class="iconfont icon-card_weixin1" v-if="customer_details.wechat && display_set.wechat"></i>
          <i class="iconfont icon-card_phone" v-if="customer_details.mobile && display_set.phone" @click="telCall(customer_details.mobile)"></i>
        </div>
      </div>
    </div>
    <div class="timeSet">
      <div class="left">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FcustomerCenter%2Fimage8%402x.png" alt="" />
        <div class="date">
          <span @click="show1 = true" v-if="endtTime">{{ this.formatTimes(endtTime) }}</span>
          <span @click="showStart" v-else>请选择开始时间</span>
          —
          <span @click="show = true" v-if="startTime">{{ this.formatTimes(startTime) }}</span>
          <span @click="showEnd" v-else>请选择结束时间</span>
        </div>
      </div>
      <div class="txt" @click="clearTime">清空选择</div>
    </div>
    <div class="listBox" v-for="(item, index) in list" :key="index">
      <div class="lis">
        <div class="leftType">访问时间：</div>
        <div class="rightTxt">{{ item.created_at }}</div>
      </div>
      <div class="lis">
        <div class="leftType">页面类型：</div>
        <div class="rightTxt">{{ item.page_type }}</div>
      </div>
      <div class="lis">
        <div class="leftType">页面标题：</div>
        <div class="rightTxt">{{ item.title }}</div>
      </div>
      <div class="lis">
        <div class="leftType">页面URL：</div>
        <div class="rightTxt url" @click="toUrl(item.url)" v-if="!fun.isUrl(item.url)">{{ item.url }}</div>
        <div class="rightTxt url" v-clipboard:copy="item.url" v-clipboard:success="onCopy" v-else>{{ item.url }}</div>
      </div>
      <div class="lis">
        <div class="leftType">访问端口：</div>
        <div class="rightTxt">{{ item.port_name }}</div>
      </div>
      <div class="lis">
        <div class="leftType">访问次数：</div>
        <div class="rightTxt">{{ item.second == "-1" ? "未知" : `当天第${item.second}次访问` }}</div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker v-model="startTime" type="date" title="选择年月日" @confirm="confirmStart" @cancel="cancel" :max-date="nowData" />
    </van-popup>
    <van-popup v-model="show1" position="bottom">
      <van-datetime-picker v-model="endtTime" type="date" title="选择年月日" @confirm="confirmEnd" @cancel="cancel" :max-date="nowData" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      customer_details: [],
      list: [],
      startTime: new Date(),
      endtTime: "",
      show: false,
      show1: false,
      nowData: new Date(),
      display_set: "",
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.endtTime = new Date(this.formatTimes(this.getlastMonth()));
    console.log(this.endtTime);
    this.getData();
  },
  methods: {
    showStart() {
      this.show1 = true;
      this.endtTime = this.nowData;
    },
    showEnd() {
      this.show = true;
      this.startTime = this.nowData;
    },
    clearTime() {
      //清空日期选择
      this.endtTime = "";
      this.startTime = "";
      this.init();
      this.getData();
    },
    toUrl(url) {
      if (!this.fun.isUrl(url)) {
        window.location.href = url;
      }
    },
    copy() {
      window.clipboardData.setData("Text", clipBoardContent);
    },
    onCopy() {
      Toast({
        message: "复制成功",
        position: "bottom",
        duration: 1500
      });
    },
    cancel() {
      this.show = false;
      this.show1 = false;
    },
    confirmStart(e) {
      this.show = false;
      this.init();
      this.getData();
    },
    confirmEnd(e) {
      this.show1 = false;
      this.init();
      this.getData();
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.list = [];
    },
    getlastMonth() {
      let now = new Date();
      // 当前月的日期
      let nowDate = now.getDate();
      let lastMonth = new Date(now.getTime());
      // 设置上一个月（这里不需要减1）
      lastMonth.setMonth(lastMonth.getMonth());
      // 设置为0，默认为当前月的最后一天
      lastMonth.setDate(0);
      // 上一个月的天数
      let daysOflastMonth = lastMonth.getDate();
      // 设置上一个月的日期，如果当前月的日期大于上个月的总天数，则为最后一天
      lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate);
      console.log(lastMonth);
      return lastMonth;
    },
    formatTimes(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return [year, month, day].map(this.formatNumber).join("-");
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    telCall(phone) {
      window.location.href = `tel://${phone}`;
    },
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        let json = {
          member_id: this.$route.params.id
        };
        if (this.endtTime) {
          json.start_date = this.formatTimes(this.endtTime);
        }
        if (this.startTime) {
          json.end_date = this.formatTimes(this.startTime);
        }
        this.page = this.page + 1;
        json.page = this.page;
        $http.post("plugin.customer-center.frontend.controllers.browse.get-member-browse-details", json, "加载中").then(
          response => {
            that.isLoadMore = true;
            if (response.result === 1) {
              var myData = response.data.browse_details_list.data;
              that.list = that.list.concat(myData); //数组拼接
            } else {
              that.page = that.page - 1;
              that.isLoadMore = false;
            }
          },
          function (response) {
            console.log("response", response);
            // error callback
          }
        );
      }
    },
    getData() {
      let json = {
        member_id: this.$route.params.id
      };
      if (this.endtTime) {
        json.start_date = this.formatTimes(this.endtTime);
      }
      if (this.startTime) {
        json.end_date = this.formatTimes(this.startTime);
      }
      $http
        .get("plugin.customer-center.frontend.controllers.browse.get-member-browse-details", json, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.total_page = response.data.browse_details_list.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.customer_details = response.data.customer_details;
            this.list = response.data.browse_details_list.data;
            this.display_set = response.data.display_set;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.customerCenterRecord {
  padding: 1rem 0.75rem 1.5rem 0.75rem;
}

.listBox {
  border-radius: 0.5rem;
  padding: 1rem 0.75rem;
  margin: 0.75rem 0;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;

  .lis {
    display: flex;
    justify-content: flex-start;
    font-size: 0.8125rem;
    margin-bottom: 0.625rem;

    .leftType {
      color: #999;
      flex-shrink: 0;
    }

    .rightTxt {
      flex: 1;
      text-align: left;
    }

    .url {
      text-decoration: underline;
      color: #02bbff;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

.timeSet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.6875rem 0;

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
  }

  .date {
    font-size: 0.8125rem;
    color: #333;
  }

  .txt {
    color: var(--themeBaseColor);
  }
}

.top {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1rem 0.75rem 1.0625rem 0.75rem;
  display: flex;

  .topRight {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icobox {
      flex-shrink: 0;

      .iconfont {
        font-size: 1.3rem;
        color: var(--themeBaseColor);
      }

      .icon-card_weixin1 {
        margin-right: 0.625rem;
      }
    }

    .user {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;

      .name {
        font-size: 0.875rem;
        color: #333;
      }

      .id {
        font-size: 0.75rem;
        color: #999;
      }
    }
  }

  .image {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    margin-right: 0.5rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>